<template>
  <div class="simple-loading">
    <div class="loading-fail" v-if="isFail">
      <i class="el-icon-error" />&nbsp;&nbsp;加载失败 QAQ
    </div>
    <img class="loading-img" src="@/assets/loading_2.gif" v-else />
  </div>
</template>

<script>
export default {
    name: 'SimpleLoading',
    props: {
        isFail: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

<style lang="less">
.simple-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
  .loading-img {
    width: 100px;
  }
  .loading-fail {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
}
</style>
